<template>
    <div class="outDiv">
        <div style="position: absolute;left: 2%;">
            <label @click="btnIndex()">
                < 返回 </label>
        </div>
        <div class="form">
            <form>
                <table>
                    <tbody>
                        <tr style="border: none;">
                            <td colspan="2" style="border: none;">个人信息</td>
                        </tr>
                        <tr>
                            <td>*姓名</td>
                            <td><input type="text" v-model="name" readonly></td>
                        </tr>
                        <tr>
                            <td>*编号</td>
                            <td><input type="text" v-model="uId" readonly></td>

                        </tr>
                        <tr>
                            <td>*性别</td>
                            <td>
                                <input type="radio" name="sex" value="男" v-model="sex" disabled>男
                                <input type="radio" name="sex" value="女" v-model="sex" disabled>女
                            </td>

                        </tr>
                        <tr>
                            <td>*手机号</td>
                            <td><input type="text" v-model="phone"></td>
                        </tr>
                        <tr>
                            <td>*学校</td>
                            <td><input type="text" v-model="school"></td>
                        </tr>
                        <tr>
                            <td>*专业</td>
                            <td><input type="text" v-model="major"></td>
                        </tr>
                        <tr>
                            <td>*人员属性</td>
                            <td>
                                <input type="radio" name="job" value="群众" v-model="attribute">群众
                                <input type="radio" name="job" value="团员" v-model="attribute">团员
                                <input type="radio" name="job" value="党员" v-model="attribute">党员
                            </td>
                        </tr>
                    </tbody>
                </table>
                <input type="button" value="提交" class="footerBtn" @click="btnSave()">
            </form>
        </div>
    </div>
</template>
<script setup>
import { useRouter, useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import { url } from '@/router';
let router = useRouter()
let route = useRoute()
let name = ref('')
let uId = ref()
let sex = ref([])
let phone = ref('')
let major = ref('')
let school = ref('')
let attribute = ref([])
onMounted(() => {
    let uName = route.params.name
    fetch(`${url}/user/${uName}`).then(res => {
        if (res.ok) {
            return res.json();
        }
    }).then(data => {
        data.forEach(item => {
            name.value = item.name
            uId.value = item.uId
            if (item.sex === 0) {
                sex.value = '女'
            } else {
                sex.value = '男'
            }
            phone.value = item.phone
            school.value = item.school
            major.value = item.major
            attribute.value = item.attribute
        })
    })
})
// 修改个人信息
function btnSave() {
    let id = uId.value
    let obj = {
        phone: phone.value,
        school: school.value,
        major: major.value,
        attribute: attribute.value
    }
    fetch(`http://localhost:5000/user/${id}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(obj)
    }).then(res => {
        if (res.ok) {
            alert('修改成功')
            router.push('/index')
        }
    })
}

function btnIndex() {
    // 返回首页
    router.push('/index')
}
</script>
<style scoped>
label {
    width: 100%;
    font-size: 16px;
    color: #1b96f0;
}

.outDiv {
    width: 100%;
    height: 100%;
    background-color: color(display-p3 0.5 0.5 0.5 / 0.12);
    display: flex;
    justify-content: center;
}

.form {
    margin-top: 15px;
    border-radius: 8px;
    width: 80%;
    height: 61%;
    background-color: #fff;
    display: flex;
    justify-content: center;
}

table {
    border-collapse: collapse;
    font-family: cursive;
    width: 100%;
}

td {
    height: 50px;
    line-height: 50px;
}

table input {
    border: none;
    outline: none;
}

input {
    font-family: cursive;
}

tr,
td {
    border-bottom: 1px dashed gray;
}

.footerBtn {
    margin-top: 11%;
    width: 270px;
    height: 30px;
    border-radius: 25px;
    background-color: gray;
    color: #fff;
}
</style>